<template>
  <!-- 订单详情页 -->
  <div class="all">
    <!-- 返回上一个界面 -->
    <div class="header">
      <a style="color:#2cb5ac font-size:18px" @click="back">返回</a>
    </div>
    <!-- 接单内容 -->
    <div class="content">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="订单项编号" />
          <el-table-column prop="productId" label="产品编号" />

          <el-table-column prop="product.name" label="产品" />

          <el-table-column label="产品图片">
            <!-- 图片 -->
            <!-- 作用域插槽 -->
            <template slot-scope="scope">
              <el-image
                style="width: 40px; height: 40px"
                :src="scope.row.product.photo"
                :preview-src-list="[scope.row.product.photo]"
              />
            </template>
          </el-table-column>

          <el-table-column prop="price" label="单价" />

          <el-table-column prop="number" label="数量" />
        </el-table>
      </template>
    </div>

    <!-- 订单详细信息 -->
    <div class="foot">
      <div class="card1">
        <el-card class="box-card" shadow="always" body-style="padding:0px ">
          <div class="basic">订单基本信息</div>
          <div class="text1"> 订单编号:{{ id1 }}</div>
          <div class="text1"> 订单金额: {{ all(tableData) }}</div>
          <div class="text1"> 下单时间: {{ tableData2.orderTime | fmtDate }}</div>
          <div class="text1"> 订单状态: {{ tableData2.status }}</div>
        </el-card>
      </div>
      <div class="card1">
        <el-card class="box-card" shadow="always" body-style="padding:0px ">
          <div class="basic">接单者信息</div>
          <div class="text1"> 接单者:{{ tableData2.employee.username }}</div>
          <div class="text1"> 手机号: {{ tableData2.employee.telephone }}</div>
        </el-card>
      </div>
      <div class="card1">
        <el-card class="box-card" shadow="always" body-style="padding:0px ">
          <div class="basic">下单者信息</div>
          <div class="text1"> 下单者:{{ tableData2.customer.realname }}</div>
          <div class="text1"> 手机号: {{ tableData2.customer.telephone }}</div>
        </el-card>
      </div>
      <div class="card1">
        <el-card class="box-card" shadow="always" body-style="padding:0px ">
          <div class="basic">雇主信息</div>
          <div class="text1"> 雇主:{{ tableData2.address.username }}</div>
          <div class="text1"> 手机号: {{ tableData2.address.telephone }}</div>
          <div class="text1"> 服务地址: {{ merge(tableData2.address) }}</div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      // 上一个页面传来的id数据
      id1: '',
      tableData: [],
      tableData2: [],
      address: ''
    }
  },
  computed: {},
  async created() {
    // 将id赋值给id1
    this.id1 = this.$route.query.id
    this.getorder()
  },
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1)
    },
    async getorder() {
      const data = {
        id: this.id1
      }
      const res = await get('/order/findById', { ...data })
      this.tableData = res.data.orderLines
      this.tableData2 = res.data
      console.log(res)
    },
    // 计算总价
    all(order) {
      console.log(order)
      let i = {}
      let mun = 0
      for (i in order) {
        mun = mun + order[i].price * order[i].number
      }
      return mun
    },
    // 合成地址
    merge(data) {
      this.address = data.city + data.area + data.address
      return this.address
    }
  }
}
</script>
<style scoped>
.foot{
  margin-top: 20px;
  display: flex;
}
.text {
    font-size: 14px;
  }
  .box-card {
    width: 250px;
    height: 300px;
    text-align: center;
    margin-left: 60px;
  }
.basic{
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #2cb5ac;
  color: aliceblue;
}
.text1{
  margin-top: 30px;
}
.el-card {
    border-radius: 20px;
}
</style>
